<template>
  <div class="game">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        会员列表
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="game-content">
      <el-form>
        <el-form-item>
          <el-dropdown trigger="hover"
            @command="dropdownStateChange">
            <span class="el-dropdown-link">
              {{dropdownValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{value: null, title: '入会方式'}">
                入会方式
              </el-dropdown-item>
              <el-dropdown-item :command="{value: item.id, title: item.platform}"
                v-for="item in platformList"
                :key="item.id">
                {{item.platform}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="hover"
            @command="dropdownSexChange">
            <span class="el-dropdown-link">
              {{dropdownSexTitle}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{value: '', title: '全部性别'}">
                全部性别
              </el-dropdown-item>
              <el-dropdown-item :command="{value: 1, title: '男'}">
                男
              </el-dropdown-item>
              <el-dropdown-item :command="{value: 2, title: '女'}">
                女
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="selectTime fl">
            <span class="label">注册时间</span>
            <el-date-picker v-model="startEndTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="startEndTimeChange">
            </el-date-picker>
          </div>
          <div class="fl"
            style="margin-left:15px;">
            <el-input placeholder="请输入ID/登录名/姓名"
              v-model="searchKey"
              clearable></el-input>
          </div>
          <div class="fl"
            style="margin-left:15px;">
            <el-input placeholder="请输入邀请人"
              v-model="parentName"
              clearable></el-input>
          </div>
          <div class="fl"
            style="margin-left:15px;">
            <el-input placeholder="请输入酒店"
              v-model="hotelName"
              clearable></el-input>
          </div>
          <el-button type="primary"
            @click="searchMember"
            class="searchGame">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary"
            size="small"
            class="fr"
            :disabled="!this.total"
            @click="_export">
            导出
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="memberInfoList"
            max-height="550"
            style="width: 100%">
            <el-table-column prop="id"
              label="ID">
            </el-table-column>
            <el-table-column prop="nickName"
              label="登录名">
            </el-table-column>
            <el-table-column prop="name"
              label="姓名">
            </el-table-column>
            <el-table-column 
              label="所属酒店" width="200px">
              <template slot-scope="scope">
                <el-popover trigger="hover"
                  placement="top">
                  <p>{{ scope.row.hotelNames }}</p>
                  <div slot="reference"
                    class="name-wrapper">
                   {{ scope.row.hotelNames }}
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="phone"
              label="手机号码">
            </el-table-column>
            <!-- <el-table-column prop="vip"
              label="会员等级">
            </el-table-column> -->
            <el-table-column prop="sex"
              label="性别">
            </el-table-column>
            <el-table-column prop="createTime"
              label="注册时间">
            </el-table-column>
            <el-table-column prop="platform"
              label="入会方式">
            </el-table-column>
            <el-table-column label="邀请人">
              <template slot-scope="scope">
                <el-button type="text"
                  @click="lookInvite(scope.row)">{{scope.row.inviteName}}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="haokeCoin"
              label="钱包余额">
            </el-table-column>
            <el-table-column label="分销订单">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="viewFx(scope.row.id)">
                  查看分销订单
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="editMember(scope.row.id)">
                  查看用户详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item style="margin-top: 20px;">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes, jumper"
            :total="total">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog :visible.sync="dialogAddGameGroup"
      width="400px">
      <el-form label-width="60px">
        <div class="input-box">
          <el-form-item label="开始时间">
            <el-date-picker type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </div>
        <div class="input-box">
          <el-form-item label="结束时间">
            <el-date-picker type="date"
              placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </div>
        <div class="input-box">
          <el-form-item label="发布平台">
            <el-select placeholder="请选择发布平台">
              <el-option label="微信"
                value="shanghai"></el-option>
              <el-option label="App"
                value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogAddGameGroup = false">取 消</el-button>
        <el-button type="primary"
          @click="dialogAddGameGroup = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { exportToExcel } from "@/public/js/util";
import { queryMemberList, exportMemberList } from "@/public/js/member";

const cityData = require("@/data/cities.json");
export default {
  data() {
    return {
      state: [],
      status: 0,
      dropdownValue: "全部平台",
      dropdownLevelValue: "会员等级",
      cities: cityData.provincesEntities,
      visible: false,
      content: {
        firstTitle: "会员列表",
        type: "close"
      },
      tableData: [],
      selectionArray: [],
      total: 0,
      saleHotelIds: [],
      statusSelect: null,
      statusBtn: null,
      pageSize: 10,
      pageNo: 1,
      city: "",
      searchKey: "",
      text: "",
      dialogAddGameGroup: false,
      dialogTitle: "",
      parentName: "",
      platformList: [],
      memberInfoList: [],
      platformId: "",
      startEndTime: [],
      startTime: "",
      endTime: "",
      sex: "",
      dropdownSexTitle: "性别",
      classId: "",
      classSets: [],
      exportList: [],
      hotelName: ""
    };
  },
  created() {
    // 重置会员详情 tab
    sessionStorage.removeItem("tabIndex");
    this.getMemberList();
    this._getMemberCardLevel();
  },
  methods: {
    //获取会员列表
    getMemberList() {
      queryMemberList({
        search: this.searchKey,
        sex: this.sex,
        platformId: this.platformId,
        startTime: this.startTime,
        endTime: this.endTime,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        classId: this.classId,
        parentName: this.parentName,
        hotelName: this.hotelName
      }).then(res => {
        if (!res.data.errCode) {
          this.platformList = res.data.platformList;
          this.memberInfoList = res.data.memberInfoList;
          this.total = res.data.total;
        }
      });
    },
    //查看邀请人信息
    lookInvite(row) {
      
      let { parentType, parentId } = row;
      if (parentType == 1) {
        this.$router.push({ path: "/index/memberDetail?id=" + parentId });
      } else {
        this.$router.push({ path: "/index/supDetail?id=" + parentId });
      }
    },
    // 平台查询
    dropdownStateChange(data) {
      this.platformId = data.value;
      this.dropdownValue = data.title;
      this.reset();
    },
    //会员等级
    _getMemberCardLevel() {
      // getMemberCardLevel().then(res => {
      //   this.classSets = res.data.classLook.classSets;
      // });
    },
    dropdownLevelChange(data) {
      this.dropdownLevelValue = data.title;
      this.classId = data.value;
      this.reset();
    },
    dropdownSexChange(data) {
      this.dropdownSexTitle = data.title;
      this.sex = data.value;
      this.reset();
    },
    // 搜索
    searchMember() {
      this.reset();
    },
    //时间筛选
    startEndTimeChange(val) {
      if (val) {
        this.startTime = val[0];
        this.endTime = val[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }

      this.reset();
    },
    reset() {
      this.pageSize = 10;
      this.pageNo = 1;
      this.getMemberList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getMemberList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getMemberList();
    },
    viewFx(id) {
      //跳转到分销列表页面
      this.$router.push({ path: "/index/fxList?id=" + id });
    },
    // 编辑
    editMember(id) {
      this.$router.push({ path: "/index/memberDetail?id=" + id });
    },
    //会员列表导出
    _exportMemberList(callBack) {
      exportMemberList({
        search: this.searchKey,
        sex: this.sex,
        classId: this.classId,
        platformId: this.platformId,
        startTime: this.startTime,
        endTime: this.endTime,
        parentName: this.parentName,
        hotelName: this.hotelName
      }).then(res => {
        this.exportList = res.data.memberInfoList;
        callBack();
      });
    },
    _export() {
      this._exportMemberList(() => {
        const tHeader = [
          "ID",
          "登录名",
          "姓名",
          "手机号码",
          "会员等级",
          "性别",
          "注册时间",
          "入会方式",
          "邀请人",
          "钱包余额"
        ];
        const filterVal = [
          "id",
          "nickName",
          "name",
          "phone",
          "vip",
          "sex",
          "createTime",
          "platform",
          "inviteName",
          "haokeCoin"
        ];
        exportToExcel(tHeader, filterVal, this.exportList, "会员列表");
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.game {
  .game-content {
    background-color: white;
    padding: 20px;
    position: relative;
    .el-form {
      .el-form-item {
        .el-form-item__content {
          line-height: 34px !important;
          .el-dropdown {
            float: left;
            margin-right: 20px;
          }
          .el-input {
            float: left;
            width: 100%;
            input {
              height: 34px;
              line-height: 34px;
            }
          }
          .el-pagination {
            text-align: right;
            .el-pagination__jump {
              .el-input {
                float: none !important;
                width: 50px !important;
              }
            }
          }
          .el-table__header,
          .el-table__body {
            width: 100% !important;
          }
        }
      }
    }
    .game-state {
      text-align: left;
      .el-button {
        font-size: 12px;
        color: #6d2377;
        border: 1px solid #6d2377;
        padding: 0 20px;
        line-height: 32px;
      }
    }
    .searchGame {
      margin-left: 15px;
      padding: 9px 21px;
    }

    .label {
      float: left;
      font-size: 12px;
      line-height: 40px;
      margin-right: 8px;
    }
    .el-input__inner {
      line-height: 20px;
      height: 34px;
      margin-top: 3px;
    }
  }
  .input-box {
    .el-select,
    .el-date-editor {
      width: 80% !important;
    }
  }
  .el-range-editor.el-input__inner {
    padding-top: 0;
    width: 300px;
  }
}
</style>
